<template>
	<div class="">
		<!-- pc -->
		<div class="bg-white max-md:hidden">
			<div class="container mx-auto h-[80px] flex items-center justify-between">
				<img
					src="https://dsfw.oss-cn-shanghai.aliyuncs.com/baolian/202309130916850.png"
					alt=""
					class="aspect-auto cursor-pointer"
					style="height: 60px"
					@click="goto('/')"
				/>
				<!-- <div class="aspect-video bg-gray-500 cursor-pointer" style="height: 60px" @click="goto('/')"></div> -->
				<div class="flex justify-center items-center">
					<div class="nav-menu flex items-center">
						<ul class="main-menu text-sm flex">
							<li class="text-lg" v-for="(item, index) in menuItems" :key="index" @mouseenter="setCurrentItem(index)" @click="click(item)">
								<span class="group-hover:text-[#C1A879]">{{ item.typename }}</span>
								<ul class="sub-menu w-full text-center z-50 whitespace-nowrap" v-if="item.child && currentItem === index">
									<li v-for="(subItem, subIndex) in item.child" :key="subIndex" @click.stop="click(subItem)">
										{{ subItem.typename }}
									</li>
								</ul>
							</li>
						</ul>
					</div>

					<el-dropdown>
						<span class="el-dropdown-link text-lg flex items-center">
							<div
								style="width: 30px"
								class="select-none bg-[#C1A879] cursor-pointer rounded-full aspect-square flex justify-center items-center text-sm text-white"
							>
								{{ lg == 1 ? "中" : lg == 2 ? "繁" : "EN" }}
							</div>

							<i class="el-icon-arrow-down el-icon--right"></i>
						</span>
						<el-dropdown-menu slot="dropdown" class="flex flex-col gap-5">
							<el-dropdown-item v-if="lg !== 1">
								<div
									@click="switchs(1)"
									style="width: 30px"
									class="select-none bg-[#C1A879] cursor-pointer rounded-full aspect-square flex justify-center items-center text-sm text-white"
								>
									中
								</div>
							</el-dropdown-item>
							<el-dropdown-item v-if="lg !== 2">
								<div
									@click="switchs(2)"
									style="width: 30px"
									class="select-none bg-[#C1A879] cursor-pointer rounded-full aspect-square flex justify-center items-center text-sm text-white"
								>
									繁
								</div></el-dropdown-item
							>
							<el-dropdown-item v-if="lg !== 0"
								><div
									@click="switchs(3)"
									style="width: 30px"
									class="select-none bg-[#C1A879] cursor-pointer rounded-full aspect-square flex justify-center items-center text-sm text-white"
								>
									EN
								</div></el-dropdown-item
							>
						</el-dropdown-menu>
					</el-dropdown>
				</div>
			</div>
		</div>
		<!-- h5 -->
		<div class="bg-white hidden max-md:block">
			<div class="container mx-auto h-[50px] flex items-center justify-between px-2">
				<svg
					@click="show = true"
					xmlns="http://www.w3.org/2000/svg"
					fill="none"
					viewBox="0 0 24 24"
					stroke-width="1.5"
					stroke="currentColor"
					class="w-10 h-10 font-bold"
				>
					<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
				</svg>
				<img
					src="https://dsfw.oss-cn-shanghai.aliyuncs.com/baolian/202309130916850.png"
					alt=""
					class="aspect-auto cursor-pointer"
					style="height: 40px"
					@click="goto('/')"
				/>
				<el-dropdown>
					<span class="el-dropdown-link text-lg flex items-center">
						<div
							style="width: 30px; height: 30px"
							class="select-none bg-[#C1A879] cursor-pointer rounded-full flex justify-center items-center text-sm text-white"
						>
							{{ lg == 1 ? "中" : lg == 2 ? "繁" : "EN" }}
						</div>

						<i class="el-icon-arrow-down el-icon--right"></i>
					</span>
					<el-dropdown-menu slot="dropdown" class="flex flex-col gap-5">
						<el-dropdown-item v-if="lg !== 1">
							<div
								@click="switchs(1)"
								style="width: 30px; height: 30px"
								class="select-none bg-[#C1A879] cursor-pointer rounded-full flex justify-center items-center text-sm text-white"
							>
								中
							</div>
						</el-dropdown-item>
						<el-dropdown-item v-if="lg !== 2">
							<div
								@click="switchs(2)"
								style="width: 30px; height: 30px"
								class="select-none bg-[#C1A879] cursor-pointer rounded-full flex justify-center items-center text-sm text-white"
							>
								繁
							</div></el-dropdown-item
						>
						<el-dropdown-item v-if="lg !== 0"
							><div
								@click="switchs(3)"
								style="width: 30px; height: 30px"
								class="select-none bg-[#C1A879] cursor-pointer rounded-full flex justify-center items-center text-sm text-white"
							>
								EN
							</div></el-dropdown-item
						>
					</el-dropdown-menu>
				</el-dropdown>
				<!-- <div
					@click="ens"
					style="width: 30px; height: 30px"
					class="select-none bg-[#C1A879] cursor-pointer rounded-full flex justify-center items-center text-sm text-white"
				>
					EN
				</div>
				<div
					@click="zhong"
					style="width: 30px; height: 30px"
					class="select-none bg-[#C1A879] cursor-pointer rounded-full flex justify-center items-center text-sm text-white"
				>
					中
				</div>
				<div
					@click="fanti"
					style="width: 30px; height: 30px"
					class="select-none bg-[#C1A879] cursor-pointer rounded-full flex justify-center items-center text-sm text-white"
				>
					繁
				</div> -->
			</div>
		</div>
		<div
			class="bg-black w-screen h-screen bg-opacity-50 z-50 fixed top-0 left-0 backdrop-blur-sm"
			v-if="show"
			@click="show = false"
			style="z-index: 99999999999"
		>
			<div class="flex flex-col bg-white h-full w-2/3 gap-5 p-5 duration-300 transition-all">
				<div class="flex gap-3 flex-col" v-for="(i, index) in menuItems" :key="index">
					<div class="flex justify-between items-center" @click.stop="clicks(i)">
						<span>{{ i.typename }}</span>
						<span v-if="i.child"
							><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
								<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
							</svg>
						</span>
					</div>
					<div class="" v-for="(ii, indexs) in i.child" :key="indexs" @click.stop="click(ii)" v-if="i && i.show">
						<div class="flex justify-between">
							<span class="px-3">{{ ii.typename }}</span>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	data() {
		return {
			show: false,
			// menuItems: [
			// 	{
			// 		title: "首页",
			// 		url: "/"
			// 	},
			// 	{
			// 		title: "产品中心",

			// 		show: false,
			// 		subMenu: [
			// 			{ title: "产品中心1", url: "/goods" },
			// 			{ title: "产品中心2", url: "/goods" },
			// 			{ title: "产品中心2", url: "/goods" }
			// 		]
			// 	},
			// 	{
			// 		title: "新闻动态",
			// 		show: false,
			// 		subMenu: [
			// 			{ title: "公司动态", url: "/new" },
			// 			{ title: "行业新闻", url: "/new" }
			// 		]
			// 	},
			// 	{
			// 		title: "关于我们",
			// 		url: "/guanyu"
			// 	},
			// 	{
			// 		title: "联系我们",
			// 		url: "/lianxi"
			// 	}
			// ],

			//
			menuItems: [],

			currentItem: null
		};
	},

	watch: {},
	created() {
		this.index();
		console.log("window.location==> ", window.location.href);
	},
	methods: {
		switchs(index) {
			let obj = {
				1: "zh-CN",
				2: "zh",
				3: "en"
			};
			this.lg = index;
			this.$cookies.set("lg", obj[index]);
			history.pushState({}, "", window.location.origin + "/?lang=" + obj[index]);
			location.reload();
		},

		goto(e) {
			if (e) {
				this.$router.push(e);
			}
		},
		async index() {
			const [err, res] = await this.$to(this.$axios.get("&a=menu"));
			if (err) return this.$message.error(err);
			if (res.code == 0) return this.$message.error(res.msg);
			// this.menuItems = res.data;
			res.data.forEach((e) => {
				if (e.url === "/guanyu") {
					e.url = `/guanyu?typeid=${e.id}&lang=${this.lg ? "cn" : "en"}`;
				}
				if (e.url === "/lianxi") {
					e.url = `/lianxi?typeid=${e.id}&lang=${this.lg ? "cn" : "en"}`;
				}

				if (e.url === "/goods") {
					e.show = false;
					e.child.forEach((ee) => {
						ee.url = `/goods?id=${ee.id}&lang=${this.lg ? "cn" : "en"}`;
					});
				}

				if (e.url === "/new") {
					e.show = false;
					e.child.forEach((ee) => {
						ee.url = `/new?id=${ee.id}&lang=${this.lg ? "cn" : "en"}`;
					});
				}

				if (e.url === "/") {
					e.url = "/";
				}
			});
			this.menuItems = res.data;
		},
		setCurrentItem(index) {
			this.currentItem = index;
		},
		click(e) {
			if (e.url) {
				this.$router.push(e.url);
				this.show = false;
			}
		},
		clicks(e) {
			console.log("e==> ", e);
			if (e.hasOwnProperty("show")) {
				let data = this.menuItems;
				data.forEach((ee) => {
					if (ee.typename === e.typename) {
						ee.show = !e.show;
					}
				});

				this.menuItems = data;
			} else {
				if (e.url) {
					this.$router.push(e.url);
					this.show = false;
				}
			}
		}
	}
};
</script>

<style scoped>
.main-menu {
	display: flex;
	list-style: none;
	padding: 0;
	margin: 0;
}

.main-menu li {
	position: relative;
	padding: 10px 30px;
	cursor: pointer;
}

.sub-menu {
	position: absolute;
	top: 100%;
	left: 20px;
	/* transform: translateX(-50%); */
	display: none;
	list-style: none;
	width: fit-content;
	padding: 10px;
	background-color: #fff;
	/* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); */
}

.main-menu li:hover .sub-menu {
	display: block;
	width: fit-content;
}

.sub-menu li {
	width: fit-content;
	padding: 10px 0;
	cursor: pointer;
}

.sub-menu li:hover {
	color: #c1a879;
	/* font-weight: 600; */
	/* background-color: #000; */
}
</style>
